<template>
  <div class="wrap">
    <div class="showGoods">
      <div class="addList">
        <label>搜索：</label>
        <el-select v-model="searchType" filterable placeholder="请选择">
          <el-option
            v-for="item in queryType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-input v-model="searchValue" placeholder="请输入搜索内容"></el-input>
        <el-button type="success" icon="el-icon-search" @click="getAll(searchType,searchValue)">搜索</el-button>
      </div>
      <el-divider></el-divider>
      <el-table
        :data="upGoods"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        ref="multipleTable"
      >
        <el-table-column type="selection" width="55" disabled="true"></el-table-column>

        <el-table-column label="名称" width="150">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="类别" width="150">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.typesId.type_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="价格" width="150">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.price }}</span>
          </template>
        </el-table-column>
        <el-table-column label="数量" width="150">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.num }}</span>
          </template>
        </el-table-column>

        <el-table-column label="简介" width="150">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.details }}</span>
          </template>
        </el-table-column>
        <el-table-column label="库存商铺名" width="150">
          <template slot-scope="scope">
            <template v-if="scope.row.shopId">
              <el-tag type="success" effect="plain">{{scope.row.shopId.name}}</el-tag>
            </template>
            <template v-else>
              <el-tag type="success" effect="plain">无库存</el-tag>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope" width="150">
            <!-- <el-button size="mini" plain type="primary" @click="isputaway(scope.row._id)">上架</el-button> -->
            <el-button
              size="mini"
              type="warning"
              plain
              @click="$router.push(`goodsupdate/${scope.row._id}`)"
            >编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              plain
              @click="delOne(scope.row._id,scope.row.listImage,scope.row.detailImage)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin: 20px 10px; clear:both">
        <div style=" float:right">
          <!-- <template v-if="this.multipleSelection.length>0"> -->

          <el-button
            type="primary"
            plain
            @click="centerDialogVisible = true"
            :disabled="multipleSelection.length<=0"
          >下架</el-button>

          <el-button @click="toggleSelection()">取消选择</el-button>
        </div>
      </div>

      <el-dialog title="下架" :visible.sync="centerDialogVisible" width="25%" center>
        <div style="width:100%;text-align:center">
          <span>确定下架</span>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button @click="cancelfinal">取 消</el-button>
          <el-button type="primary" @click="confrimfinal">确 定</el-button>
        </span>
      </el-dialog>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { createNamespacedHelpers } from "vuex";
const {
  mapState,
  mapActions,
  mapMutations,
  mapGetters
} = createNamespacedHelpers("goodsStore");

const { mapActions: shopmapActions } = createNamespacedHelpers("shop");
export default {
  data() {
    return {
      // 计数器
      num: 100,
      // 模态框

      centerDialogVisible: false,

      // 模态选择框
      shopvalue: [],

      // 上传

      pageSize: 5,
      nowPage: 1,
      searchValue: "",
      // goodsData: [],
      allgoodsdata: [],
      multipleSelection: [],
      queryType: [
        {
          value: "name",
          label: "商品名称"
        },
        {
          value: "price",
          label: "商品价格"
        },
        {
          value: "details",
          label: "商品简介"
        },
        {
          value: "typesname",
          label: "类别"
        }
      ],
      searchType: "",
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 1,
      total: 0,

      // 店铺
      merchant: "",
      shopData: {},
      upGoods: [],
      shopoptions: []
    };
  },
  mounted() {
    this.getAll();
    // this.getMerchantAsync();
    // this.shopData = this.getMerchantAsync();
  },
  created() {
    this.merchant = sessionStorage.getItem("userName");
  },
  watch: {
    pageSize: function() {
      this.getAll();
    },
    nowPage: function() {
      this.getAll();
    },
    async merchant() {
      this.shopData = await this.getMerchantAsync(this.merchant);
      // console.log(12321,this.shopData);
      this.shopoptions = [
        {
          name: this.shopData.name,
          value: this.shopData._id
        }
      ];
    },
    total(newval, oldval) {
      this.total = this.filtertotal.length;
    }
  },
  computed: {
    filtergoodsData() {
      return this.goodsData.filter(item => {
        if (item.putaway == true) {
          return item;
        }
      });
    },
    filtertotal() {
      return this.allgoodsdata.filter(item => {
        if (item.putaway == true) {
          return item;
        }
      });
    }
  },
  methods: {
    ...shopmapActions(["getMerchantAsync"]),
    //获取所有商品
    getAll() {
      // console.log(
      //   this.nowPage,
      //   this.pageSize,
      //   this.searchType,
      //   this.searchValue
      // );

      axios
        .get("/goods/getAll", {
          params: {
            nowPage: this.nowPage,
            pageSize: this.pageSize,
            searchType: this.searchType,
            searchValue: this.searchValue
          }
        })
        .then(res => {
          //  console.log(23123,res.data);
          if (res.data.goods) {
            // this.goodsData = res.data.goods;
            this.allgoodsdata = res.data.allGoods;
            console.log(res.data);
            this.upGoods = res.data.upGoods;
            this.total = res.data.allGoods.length;
          } else {
            // console.log(res.data);
          }
        });
    },
    //删除一个
    delOne(id, listImage, detailImage) {
      // console.log();

      axios
        .post("/goods/del", {
          _id: id,
          listImage: listImage,
          detailImage: detailImage
        })
        .then(res => {
          if (res) {
            this.getAll();
          }
        });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      // console.log(this.pageSize, "多少条");
      // console.log();
    },
    handleCurrentChange(val) {
      this.nowPage = val;
      // console.log(this.nowPage, "多少也");
    },
    // 上架
    isputaway(_id) {},

    // 单选 上架 全选框
    toggleSelection(rows) {
      // console.log(rows);

      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      // console.log(val);

      this.multipleSelection = val;
    },
    // 确 下架
    confirmtoup() {},

    // 计数
    handleChange(value) {
      console.log(value);
    },

    // 上架提交最终按钮
    confrimfinal() {
      // let d=[];

      let _id = [];
      for (var i in this.multipleSelection) {
        // this.multipleSelection[i].typeId = this.shopvalue[0];
        _id.push(this.multipleSelection[i]._id);
      }

      let putaway = false;

      //   console.log(_id, shopId, putaway);

      axios
        .post("/goods/updatemany", { _id, putaway })
        .then(res => {
          // console.log(res);
          if (res) {
            this.centerDialogVisible = false;
            this.value = [];
            this.getAll();
          }
        })
        .catch(err => {
          console.error(err);
        });
    },
    cancelfinal() {
      this.centerDialogVisible = false;
      this.value = [];
      // console.log(this.shopvalue);
    }
  }
};
</script>
<style scoped>
.wrap {
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-input {
  width: 30%;
}
.addList {
  display: flex;
  align-items: center;
}
.addList > * {
  margin-right: 20px;
}
.TypesList {
  width: 100px;
}
span {
  margin-left: 0 !important;
}
.showGoods {
  width: 90%;
}
</style>